import React from 'react'
import { useNavigate } from 'react-router-dom'
import { CircleLove } from '../../myTypes'

export default function CircleLoveItem(props: {
  style: {
    readonly [key: string]: string
  }
  i: number
  s: CircleLove
}) {
  const { style, i, s } = props
  const navigate = useNavigate()

  function goCircleDetail(isVideo: boolean, id: string) {
    if (isVideo) {
      navigate(`/video?circleid=${id}`, { state: { type: s.type } })
    } else {
      navigate(`/circleget?circleid=${id}`, { state: { type: s.type } })
    }
  }

  return (
    <div key={i} className={style['select-item']} onClick={() => goCircleDetail(s.containVideo === 1 && /\.gif$/.test(s.headfigure), s.circleId)}>
      <div className={style['select-pic']}>
        {(s.containVideo === 0 || !/\.gif$/.test(s.headfigure)) && <img src={s.headfigure} alt="" />}
        {s.containVideo === 1 && /\.gif$/.test(s.headfigure) && <video width="100%" src={s.headfigure} poster={s.headfigure}></video>}
        {s.containVideo === 1 && (
          <div className={style.icon} style={{ right: '5px', top: '5px', transform: 'none', backgroundColor: 'rgba(0,0,0,.3)' }}>
            <img src="/static/use/icon-video-play-fff.png" alt="" />
          </div>
        )}
      </div>
      <div className={style.title}>{s.title}</div>
      <div className={style.user}>
        <div className={style['user-info']}>
          <div className={style['user-head']}>
            <img src={s.avatar} alt="" />
          </div>
          <div className={style.nickname}>{s.authorName}</div>
        </div>
        <div className={style.zero}>···</div>
      </div>
    </div>
  )
}
